﻿
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>table 组件综合演示 - Layui</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="~/Assets/component/pear/css/pear.css" />
    <link rel="stylesheet" href="~/Assets/admin/css/other/login.css" />
    <link rel="stylesheet" href="~/Assets/admin/css/variables.css" />
    <link rel="stylesheet" href="/Assets/admin/css/admin.css" />
    <link rel="stylesheet" href="/Assets/admin/css/admin.dark.css" />
    <link rel="stylesheet" href="/Assets/admin/css/reset.css" />
    <link rel="stylesheet" href="/Assets/layui/css/layui.css" />
    <link rel="stylesheet" href="/Assets/component/layui/css/layui.css" />
    <script src="~/Assets/bootstrap/js/jquery-1.10.2.min.js"></script>
    <script src="/Assets/layui/layui.js"></script>
</head>

<body>
    <div style="padding: 16px">

        <div class="layui-col-md2">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            </fieldset>
            <div id="testYearTree" class="demo-tree-more"></div>
        </div>
        <div class="layui-col-md10">
            <div class="layui-card">
                <div class="layui-card-body">
                    <h3>员工薪资</h3>
                    <table class="layui-hide" id="testSalary" lay-filter="testSalary"></table>
                </div>
            </div>
        </div>
    </div>

    <script>
        window.onload = function () {

            layui.use(['table', 'tree', 'util'], function () {
                var table = layui.table;
                var util = layui.util;
                var tree = layui.tree
                    , layer = layui.layer
                    , util = layui.util
                const currentYear = new Date().getFullYear(); // 获取当前年份
                const treeData = generateTreeData(currentYear);
                //console.log(treeData)
                // 渲染树形结构
                tree.render({
                    elem: '#testYearTree',
                    data: treeData,
                    showLine: false,  // 不显示连接线
                    click: function (obj) {
                        const data1 = obj.data;
                        // 如果选择的是年份节点，则触发相应的操作
                        //} else if(data1.id === 1) {
                        //table.reload('demo', {
                        //    where: { d_id: currentYear }  // 当前年份的数据
                        //});
                        if (data1.id === 0) {
                            table.reload('testSalary', {
                                where: { d_id: "" }  // 全部数据
                            });
                        } else {
                            console.log(data1.id)
                            // 根据选择的年月进行筛选
                            table.reload('testSalary', {
                                where: { d_id: data1.id }
                            });
                        }
                    }
                });

                // 生成树形数据
                function generateTreeData(currentYear) {
                    const years = [currentYear, currentYear - 1, currentYear - 2];
                    const treeData = years.map(year => {
                        const months = Array.from({ length: 12 }, (_, index) => ({
                            title: `${index + 1}月`,
                            id: `${year}-${index + 1}`  // 格式：年-月（例如：2025-1）
                        }));
                        return {
                            title: `${year}年`,
                            id: year,  // 年份作为id
                            children: months
                        };
                    });

                    // 追加“全部”节点
                    return [
                        {
                            title: '全部',
                            id: 0,
                            children: treeData
                        }
                    ];
                }

                //第一个实例
                table.render({
                    elem: '#testSalary'
                    , defaultToolbar: []
                    , height: "full-100"// 最大高度减去其他容器已占有的高度差
                    , toolbar: '#toolbarDemoSalary'
                    , url: '/Salary/DataList' //数据接口
                    , page: true //开启分页
                    , limit: 10 //每页默认显示的数量
                    , cols: [[
                        { field: 'Name', title: '姓名' }
                        , { field: 'RoleName', title: '角色' }
                        , { field: 'Numbers', title: '员工编号' }
                        , { field: 'BaseMoney', title: '底薪' }
                        , { field: 'ExtraSalary', title: '绩效' }
                        , { field: 'TotalSalary', title: '薪资' }
                        , { fixed: 'right', title: '操作', width: 90, toolbar: '#barDemoSalary' }
                    ]]
                });
                table.on('tool(testSalary)', function (obj) { // 双击 toolDouble
                    var data = obj.data;
                    // console.log(data.Id)
                    if (obj.event === 'SalaryDetail') {
                        layer.open({
                            title: data.Name + '薪资明细',
                            type: 2,
                            area: ['80%', '80%'],
                            content: '/Salary/SalaryDetail?s_id=' + data.Id,
                        });
                    }
                });
            });
        }
    </script>
    <script type="text/html" id="toolbarDemoSalary">
    </script>
    <script type="text/html" id="barDemoSalary">
        <div class="layui-clear-space">
            <a class="layui-btn layui-btn-xs" lay-event="SalaryDetail">薪资明细</a>
        </div>
    </script>
</body>
</html>

